ul,ol{list-style: none;}
*{margin: 0; padding: 0;}
.icon {
  width: 1em; height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
#canvas{
    display: block;
    position: fixed;
    left: 0;
    top: 0;
  }
  body{
    
    overflow: hidden;
  }
  .actions{
    position: fixed;
    top: 0;
    left: 0;
    padding: 20px;
  }
  .actions svg{
    width: 1.5em;
    height: 1.5em;
    transition: all 0.3s;
    margin: 0 10px;
  }
  .actions svg.active{
    fill: red;
    transform: scale(1.2);
  }
  .colors{
    position: fixed;
    top: 55px;
    left: 28px;
  }
  .colors > li{
    width: 20px;
    height: 20px;
    box-shadow: 0 0 3px rgba(0 0 0 0.28);
    border-radius: 50%;
    margin: 10px 0;
    transition: all 0.3s;
  }
  .colors > li.black{
    background: black;
  }
  .colors > li.red{
    background: red;
  }
  .colors > li.green{
    background: green;
  }
  .colors > li.yellow{
    background: yellow;
  }
  .colors > li.blue{
    background: blue;
  }
  .colors > li.active{
    box-shadow: 0 0 3px rgba(0 0 0 0.95);
    transform: scale(1.2);
  }
.sizes{
  position: fixed;
  right: 28px;
  top: 55px;
  width: 20px;
}
.sizes > li{
  margin: 20px 0;
  transition: all 0.3s;
}
.sizes > .thin{
  height: 0;
  width: 20px;
  border-top: 2px solid black;
}
.sizes > .thinPlus{
  height: 0;
  width: 20px;
  border-top: 4px solid black;
}
.sizes > .thick{
  height: 0;
  width: 20px;
  border-top:6px solid black;
}
.sizes > .thicker{
  height: 0;
  width: 20px;
  border-top: 8px solid black;
}
.sizes > .thickerPlus{
  height: 0;
  width: 20px;
  border-top: 10px solid black;
}
.sizes > li.active{
  margin: 20px 0px 20px 10px;
}